<template>
    <div :class="cns">
        <ph-button :class="btnCns" :block="true" :icon="icon" type='transparent' @click="onAction">{{title}}</ph-button>
        <nav class="ph-menu ph-submenu" v-toggle-height="visible">
            <slot></slot>
        </nav>
    </div>
</template>
<script lang="ts">
import { computed, defineComponent, inject, provide, ref, Ref } from 'vue'
import { ToggleHeight } from '../../directives'
import { PhButton } from 'ph-button'
import { TreeNode } from './struct'
export default defineComponent({
    name:"SubMenu",
    components:{
        PhButton
    },
    directives:{
        ToggleHeight
    },
    props:{
        title:{type:String},
		icon:{type:String}
    },
    setup(props){
        const getParentMenu = inject('getParentMenu') as ()=>TreeNode[]
        const expandParent = inject('expandParent') as ()=>void
        const paths = inject("matchedPaths") as Ref<TreeNode[]>
        const visible = ref(paths.value.findIndex(n=>n.title===props.title&&n.icon==props.icon)!==-1)
        const active = computed(()=>{
            return visible.value
        })
        const cns = computed(()=>{
            return {
                'ph-submenu-item':true,
                'ph-menu-item':true,
                'ph-menu-item-active':active.value
            }
        })
        const btnCns = computed(()=>{
            return {
                'ph-icon-arrow':true,
                'ph-icon-arrow-down':!visible.value,
                'ph-icon-arrow-up':visible.value
            }
        })
        const onAction = ()=>{
            visible.value = !visible.value
        }
        provide('getParentMenu',()=>{
            return [...getParentMenu(),{title:props.title,icon:props.icon}]
        })
        provide('expandParent',()=>{
            visible.value = true
            expandParent&&expandParent()
        })
        return {
                cns,
                btnCns,
                visible,
                active,
                onAction,
                }
    }
})
</script>
<style lang="scss">
.ph-submenu-item{
    position: relative;
    z-index: 1;
}
</style>
